import React, { useState } from 'react'
import { Table, Button } from 'antd'
import type { ColumnsType } from 'antd/es/table';
export default function PageTest() {
    const columns: ColumnsType<IUserItem> = [
        {
            title: '姓名', // title 属性是表头信息
            dataIndex: 'name', // 渲染dataSource数据源中的哪个字段[属性]
        },
        {
            title: '年龄',
            dataIndex: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
        },
        {
            title: '操作',
            /**
             * 
             * @param value  当前行对象
             *        当有dataIndex属性的时候， value就是dataIndex指定的字段值
             *        没有dataIndex属性的时候， value就是   当前行对象
             * @param row   当前行对象
             * @param index 索引
             * @returns 
             */
            dataIndex: 'name',
            render(value: string, row: IUserItem, index: number) { // 自定义该列显示的内容
                console.log('value: ', value);
                console.log('row: ', row);
                console.log('index: ', index);
                return (
                    <>
                        <Button type='primary' danger onClick={() => {
                            // delete(row.id)
                        }}>删除</Button>
                    </>
                )
            }
        }
    ];

    /**
     * 定义dataSource数据源的类型
     */
    interface IUserItem {
        id: number;
        name: string;
        age: number;
        address: string;
    }
    type IUserList = IUserItem[]
    // data 数据  source 资源  数据资源，要渲染的表格数据
    const dataSource: IUserList = [
        {
            id: 1,
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            id: 2,
            name: '吴彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
        {
            id: 3,
            name: '迪丽热巴',
            age: 42,
            address: '西湖区湖底公园1号',
        },
        {
            id: 4,
            name: '古力娜扎',
            age: 42,
            address: '西湖区湖底公园1号',
        },
        {
            id: 5,
            name: '佟丽娅',
            age: 42,
            address: '西湖区湖底公园1号',
        }
    ];
    // 设置分页相关状态
    let [current, setCurrent] = useState<number>(1);// 当前页
    let [pageSize, setPageSize] = useState<number>(2); // 每页几条
    let [total, setTotal] = useState<number>(5); // 总条数
    return (
        <div>
            <h3>pagination 配置</h3>
            <Table
                rowKey='id'  // 指定不重复的key值
                columns={columns}
                dataSource={dataSource}
                // pagination={false}  // 不显示分页器
                pagination={{
                    current, // 当前页
                    pageSize, // 每页显示几条 
                    total,// 总条数
                    showQuickJumper:true, // 快速跳转
                    showSizeChanger:true, // 每页显示几条下拉框
                    pageSizeOptions:[2,3,5,10], // 下拉框选项
                    showTotal:(total:number)=>{ // 总条数自定义显示
                        return (
                            <div>
                                总体条数是: <span style={{color:'red'}}>{total}</span>
                            </div>
                        )
                    },
                    /**
                     * @param page 变化后的当前页
                     * @param pageSize 变化后的每页几条
                     */
                    onChange:(page:number, pageSize:number)=>{
                        // console.log('page:' , page);
                        // console.log('pageSize: ', pageSize);
                        setCurrent(page);
                        setPageSize(pageSize);
                    }
                }}
            />
            
        </div>
    )
}
